import React, { useEffect, useState } from 'react'
import Navigation from '../../../component/Navigation'
import { Input, Select, Button, Pagination,Space } from 'antd';
import { SearchOutlined, DownloadOutlined, ProfileOutlined } from '@ant-design/icons';
import './index.less'
import Table from '../../../component/table'
import {moneydata} from '../../../api/Student'
import Alert from '../../../component/alert'
import {
  EditTwoTone,
  DeleteTwoTone,
  SnippetsTwoTone,
} from '@ant-design/icons';
export default function Expense(props) {
  //左边导航
  let [list, setlist] = useState([])
  //弹框的参数
  let [columns,setcolumns]=useState([])
  //总数据
  let [totle,settotle]=useState([])
  //截取到的数据
  let [jie,setjie]=useState([])
  let [pageNumber, setpageNumber] = useState(1)
  let [pageSize, setpageSize] = useState(10)
  //左边的导航(学院)
  let [college,setcollege]=useState('网站工程')
  //阶段
  let [stage,setstage]=useState('实训')
  //班级
  let [classroom,setclassroom]=useState('2104A')
  //总条数
  let [num,setnum]=useState(0)
  //弹框的数据
  let [alertcon,setalertcon]=useState()
   //弹框的状态
   let [alertFlag,setalertFlag]=useState(false)
   //弹框的名称
   let [alertname,setalertname]=useState('')
   //搜索名字
  let [searchname,setsearchname]=useState('')
  //上学的状态
  let [school,setchool]=useState('')
  //性别
  let [sex,setsex]=useState('')
  // 左侧菜单栏点击事件
  const handleClick = async (e: any) => {
    console.log(e.key);
    let a = e.key.split("-")
    console.log(a);
    setcollege(a[0])
    setstage(a[1])
    setclassroom(a[2])

  }
  //点击分页
  function onChange(pageNumber) {
    console.log('Page: ', pageNumber);
    setpageNumber(pageNumber)
  }
  //分页的下拉
  function onShowSizeChange(current, pageSize) {
    console.log(current, pageSize);
    setpageSize(pageSize)
  }
   //关闭
   function close(){
    setalertFlag(false)
  }
   //选择器
   function handleChange(value) {
    console.log(`selected ${value}`);
    setchool(value)
  }
  //选择器
  function sexChange(value) {
    console.log(`selected ${value}`);
    setsex(value)
  }
  const { Option } = Select;
  const setok=()=>{
    moneydata({college:college,stage:stage,classroom:classroom,pageNumber:pageNumber,pageSize:pageSize}).then((res)=>{
      console.log(res,25);
      //获取到的总数据
      settotle(res.data.result.ban)
      //获取到的截取的数据
      setjie(res.data.result.jiearr)
      setnum(res.data.result.ban.length)
    })
  }
  useEffect(() => {
    moneydata({college:college,stage:stage,classroom:classroom,pageNumber:pageNumber,pageSize:pageSize}).then((res)=>{
      console.log(res,25);
      //获取到的总数据
      settotle(res.data.result.ban)
      //获取到的截取的数据
      setjie(res.data.result.jiearr)
      setnum(res.data.result.ban.length)
    })
    const columns=[
      {
        title: "学号",
        dataIndex: "id",
        key: "id",
        width: '150px'
      },
      {
        title: "姓名",
        dataIndex: "name",
        key: "name",
        width: '150px'
      },
      {
        title: "身份证",
        dataIndex: "cid",
        key: "cid",
        width: '250px'
      },
      {
        title: "欠费情况",
        // dataIndex: "number",
        // key: "number",
        width: '150px',
        render:(text,record)=>(
          <span className="red">{Number(record.totlemoney)-Number(record.nowmoney)}</span>
        )
      },
      {
        title: "状态",
        dataIndex: "stop",
        key: "stop",
        width: '150px'
      },
      {
        title: "操作",
        // dataIndex: "number",
        // key: "number",
        // width: '150px'
        render:(text)=>(
          <Space size="middle">
          <EditTwoTone onClick={()=>{
            setalertcon(text)
            setalertFlag(true)
            setalertname('缴费')
          }}/>
           <SnippetsTwoTone onClick={()=>{
              console.log(text);
              setalertcon(text)
              setalertFlag(true)
              setalertname('缴费明细')
           }}/>
            </Space>
        )
      },
    ]
    setcolumns(columns)
    const list = [
      {
        "id": 1,
        "collage": "网站工程",
        "school": [
          {
            "sid": "wsx",
            "name": "实训",
            "classlist": [
              { "classname": "2104A" },
            ]
          },
          {
            "sid": "wzy",
            "name": "专业",
            "classlist": [
              { "classname": "2108A" },
              { "classname": "2109A" }

            ]
          },
          {
            "sid": "wzg",
            "name": "专高",
            "classlist": [
              { "classname": "2102A" },
              { "classname": "2107A" }
              
            ]
          }
        ]
      },
      {
        "id": 2,
        "collage": "传媒学院",
        "school": [
          {
            "sid": "czy",
            "name": "专高",
            "classlist": [
              { "classname": "2015A" },
              // { "classname": "2109A" }
            ]
          }
        ]
      }
    ]
    setlist(list)
  }, [college,stage,classroom,pageNumber,pageSize])
  return (
    <div className='money'>
      <div className="mleft">
        <Navigation
          // 总数据
          data={list}
          // 一标题属性  数组类型  "collage":["网站工程", "人工智能"]
          primaryNavigationProps="collage"
          // 二级标题属性  "collage":["网站", "人工"]
          childrenProps='school'
          // 二级标题对象属性
          childrenItem='name'
          // 获取当前自己标题的key
          handleClick={handleClick}
          // 设置袭击标题的key值
          setChildrenKey="sid"
          isDeepMenu={true}
          deepProps="classlist"
          deepItem="classname"
          // 样式
          style={{ width: 200, height: 500, border: "1px solid #ccc" }}
        />
      </div>
      <div className="mright">
        <div className="mrighttop">
          <Input placeholder="姓名" onChange={(e)=>{
            setsearchname(e.target.value)
          }} />
          <Select defaultValue="状态" style={{ width: 120 }}  onChange={handleChange}>
            <Option value="正常">正常</Option>
            <Option value="休学">休学</Option>
            <Option value="退学" >退学</Option>
            <Option value="毕业">毕业</Option>
            <Option value="开除">开除</Option>
          </Select>
          <Select defaultValue="性别" style={{ width: 120 }}  onChange={sexChange}>
            <Option value="男">男</Option>
            <Option value="女">女</Option>
          </Select>
          <Button icon={<SearchOutlined />} type="primary" onClick={()=>{
             //姓名
             let arr=[]
             totle.filter((item)=>{
               if(item.name.indexOf(searchname)!==-1&&item.stop==school&&item.sex==sex){
                 arr.push(item)
               }
             })
             console.log(arr);
            //  totle=arr
            // console.log(totle);
            setjie(arr)
          }}>搜索</Button>
          <Button type="primary" icon={<DownloadOutlined />} >导出</Button>
        </div>
        <div className="biao">
            <Table columns={columns} studentData={jie}></Table>
        </div>
        <div className="page">
          <Pagination
            showQuickJumper
            defaultCurrent={1}
            total={num}
            showSizeChanger
            defaultPageSize={10}
            onShowSizeChange={onShowSizeChange}
            onChange={onChange} />
        </div>
      </div>
      <div>
        {
          alertFlag==true?<Alert alertName={alertname}setok={setok} con={alertcon} width={'700px'} alertFlag={true} close={close}></Alert>:null
        }
      </div>
    </div>
  )
}
